<template>
  <div>
    <!-- 标题 -->
    <div class="box-header flex items-center justify-between">
      <h1>
        <i class="el-icon-postcard title-logo" />
        {{ $t('white_list.title') }}
      </h1>
      <el-button
        v-if="isAuth('10401000.MANAGE')"
        size="middle"
        type="primary"
        @click="addAppHandle"
        icon="el-icon-circle-plus-outline"
        >{{ this.$t('white_list.addAppBtn') }}</el-button
      >
    </div>
    <hr class="mb-3" />

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('white_list.application')" name="first">
        <Application ref="application" />
      </el-tab-pane>
      <el-tab-pane :label="$t('white_list.bindRecord')" name="second">
        <BingRecord ref="bingRecord" />
      </el-tab-pane>
    </el-tabs>

    <add-or-update-application
      v-model="visible"
      @close="visible = false"
      ref="addOrUpdate"
      @refreshDataList="refresh"
    >
    </add-or-update-application>
  </div>
</template>

<script>
import BingRecord from './components/bind-record'
import Application from './components/application'
import AddOrUpdateApplication from './components/add-or-update-application'
import { isAuth } from '@/utils'

export default {
  components: {
    BingRecord,
    Application,
    AddOrUpdateApplication
  },
  data() {
    return {
      activeName: 'first',
      dataForm: {
        operatorName: '',
        operatorStatus: null
      },
      visible: false,
      operatorDetailVisible: false,
      checkOperatorVisible: false,
      addLicenseVisible: false,
      cardBindBankId: 0,
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      rows: 0,
      dataListLoading: false,
      orderListLoading: false,
      agreementShowVisible: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.application.init()
    })
  },
  methods: {
    isAuth,
    handleClick(tab, event) {
      if (tab.name === 'second') {
        console.log('second')
        this.$nextTick(() => {
          this.$refs.bingRecord.init()
        })
      } else if (tab.name === 'first') {
        this.$nextTick(() => {
          this.$refs.application.init()
        })
      }
    },
    refresh() {
      this.$refs.application.init()
    },
    addAppHandle() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init()
      })
    }
  }
}
</script>
<style>
.el-container {
  margin-top: 20px;
}

.el-header,
.el-footer {
  color: #333;
  text-align: left;
  line-height: 60px;
}
</style>
